<template>
  <div class="auth-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="floating-shape shape-1"></div>
      <div class="floating-shape shape-2"></div>
      <div class="floating-shape shape-3"></div>
    </div>

    <!-- 主要内容 -->
    <div class="auth-content">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="logo">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
            </svg>
          </div>
          <h1 class="brand-title">舆情智能助手</h1>
          <p class="brand-subtitle">AI驱动的智能舆情分析平台</p>
          <div class="brand-features">
            <div class="feature-item">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 12L11 14L15 10"/>
                <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"/>
              </svg>
              <span>智能分析</span>
            </div>
            <div class="feature-item">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"/>
                <path d="M14 2V8H20"/>
              </svg>
              <span>报告生成</span>
            </div>
            <div class="feature-item">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <path d="M21 21L16.65 16.65"/>
              </svg>
              <span>信息检索</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧认证表单 -->
      <div class="auth-section">
        <div class="auth-card">
          <!-- 返回按钮 -->
          <button @click="goBack" class="back-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            返回
          </button>

          <!-- 认证表单 -->
          <div class="auth-form-container">
            <!-- 错误提示 -->
            <div v-if="errorMessage" class="error-message">
              {{ errorMessage }}
            </div>

            <!-- 成功提示 -->
            <div v-if="successMessage" class="success-message">
              {{ successMessage }}
            </div>

            <form @submit.prevent="handleAuth" class="auth-form">
              <div class="form-group">
                <label for="username">用户名</label>
                <div class="input-wrapper">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                  </svg>
                  <input 
                    id="username"
                    v-model="authForm.username" 
                    type="text" 
                    placeholder="请输入用户名"
                    required
                  />
                </div>
              </div>
              
              <div class="form-group">
                <label for="password">密码</label>
                <div class="input-wrapper">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                    <circle cx="12" cy="16" r="1"/>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                  </svg>
                  <input 
                    id="password"
                    v-model="authForm.password" 
                    type="password" 
                    placeholder="请输入密码"
                    required
                  />
                </div>
              </div>
              
              <div v-if="authMode === 'register'" class="form-group">
                <label for="confirmPassword">确认密码</label>
                <div class="input-wrapper">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                    <circle cx="12" cy="16" r="1"/>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                  </svg>
                  <input 
                    id="confirmPassword"
                    v-model="authForm.confirmPassword" 
                    type="password" 
                    placeholder="请再次输入密码"
                    required
                  />
                </div>
              </div>
              


              <button type="submit" class="submit-btn" :disabled="isLoading">
                <span v-if="!isLoading">{{ authMode === 'login' ? '登录' : '注册' }}</span>
                <div v-else class="loading-spinner"></div>
              </button>
            </form>

            <!-- 切换模式 -->
            <div class="auth-switch">
              <span>{{ authMode === 'login' ? '还没有账号？' : '已有账号？' }}</span>
              <button @click="switchAuthMode" class="switch-btn">
                {{ authMode === 'login' ? '立即注册' : '立即登录' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

interface AuthForm {
  username: string
  password: string
  confirmPassword: string
}

const router = useRouter()
const authMode = ref<'login' | 'register'>('login')
const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')
const authForm = ref<AuthForm>({
  username: '',
  password: '',
  confirmPassword: ''
})

// 清除消息
const clearMessages = () => {
  errorMessage.value = ''
  successMessage.value = ''
}

// 切换认证模式
const switchAuthMode = () => {
  authMode.value = authMode.value === 'login' ? 'register' : 'login'
  // 重置表单和消息
  authForm.value = {
    username: '',
    password: '',
    confirmPassword: ''
  }
  clearMessages()
}

import { AuthService } from '@/services/auth'

// 处理认证
const handleAuth = async () => {
  const { username, password, confirmPassword } = authForm.value
  
  // 清除之前的消息
  clearMessages()
  
  if (authMode.value === 'register') {
    // 注册逻辑
    if (password !== confirmPassword) {
      errorMessage.value = '两次输入的密码不一致'
      return
    }
    
    isLoading.value = true
    
    try {
      await AuthService.register({ username, password })
      successMessage.value = '注册成功！请登录'
      // 注册成功后切换到登录模式
      authMode.value = 'login'
      authForm.value = { username, password, confirmPassword: '' }
    } catch (error) {
      errorMessage.value = error instanceof Error ? error.message : '注册失败，请重试'
    } finally {
      isLoading.value = false
    }
  } else {
    // 登录逻辑
    isLoading.value = true
    
    try {
      await AuthService.login({ username, password })
      successMessage.value = '登录成功，即将自动跳转...'
      // 延迟跳转，让用户看到成功消息
      setTimeout(() => {
        router.push('/chat')
      }, 250)
    } catch (error) {
      errorMessage.value = error instanceof Error ? error.message : '登录失败，请重试'
    } finally {
      isLoading.value = false
    }
  }
}

// 返回首页
const goBack = () => {
  router.push('/')
}

// 组件挂载时检查是否已登录
onMounted(() => {
  const savedUserInfo = localStorage.getItem('userInfo')
  if (savedUserInfo) {
    try {
      const userInfo = JSON.parse(savedUserInfo)
      if (userInfo.isLoggedIn) {
        router.push('/chat')
      }
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }
})
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  background: #ffffff;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #000000;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.background-decoration::before,
.background-decoration::after {
  content: '';
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.background-decoration::before {
  top: 25%;
  left: -300px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 20%, transparent 50%);
  animation: float1 8s ease-in-out infinite;
}

.background-decoration::after {
  top: -200px;
  right: -200px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 20%, transparent 50%);
  animation: float2 10s ease-in-out infinite reverse;
}

@keyframes float1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -30px) scale(1.1);
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 30px) scale(1.1);
  }
}

/* 主要内容 */
.auth-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* 左侧品牌区域 */
.brand-section {
  background: #fafafa;
  padding: 3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  position: relative;
  border-right: 1px solid #e5e5e5;
}

.brand-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.logo {
  margin-bottom: 2rem;
  opacity: 0.9;
}

.brand-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  letter-spacing: -0.025em;
  color: #000000;
}

.brand-subtitle {
  font-size: 1.125rem;
  margin: 0 0 3rem 0;
  color: #666666;
  line-height: 1.6;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  color: #666666;
}

.feature-item svg {
  color: #999999;
}

/* 右侧认证区域 */
.auth-section {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: #666666;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-bottom: 2rem;
  margin-left: -0.5rem;
}

.back-btn:hover {
  background: #f8f9fa;
  color: #000000;
}

/* 错误和成功消息样式 */
.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.error-message::before {
  content: '⚠️';
  font-size: 1rem;
}

.success-message {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.success-message::before {
  content: '✅';
  font-size: 1rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #000000;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper svg {
  position: absolute;
  left: 1rem;
  color: #999999;
  z-index: 1;
}

.form-group input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: #ffffff;
  color: #000000;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.form-group input:focus + svg,
.input-wrapper:focus-within svg {
  color: #000000;
}

.form-group input::placeholder {
  color: #999999;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background: #000000;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background: #333333;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.auth-switch {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.auth-switch span {
  font-size: 0.875rem;
  color: #666666;
}

.switch-btn {
  background: none;
  border: none;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  margin-left: 0.5rem;
  text-decoration: underline;
}

.switch-btn:hover {
  color: #333333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .auth-container {
    padding: 1rem;
  }
  
  .auth-content {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  
  .brand-section {
    padding: 2rem 1.5rem;
    display: none; /* 移动端隐藏品牌区域 */
  }
  
  .auth-section {
    padding: 2rem 1.5rem;
  }
  
  .brand-title {
    font-size: 2rem;
  }
  
  .auth-header h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 0.5rem;
  }
  
  .auth-section {
    padding: 1.5rem 1rem;
  }
  
  .form-group input {
    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
  }
}
</style> 